<template>
  <!-- 底部导航 -->
  <div class="footer-wrapper v-fixed-bottom">
    <div class="footer-list v-flex-row-center-center">
        <div class="v-flex-column-center-center" :class="{'active':selected === 1}" @click="toHomePage">
          <img src="../../assets/images/tabBar/ihome_2.png" class="tab-bar-icon" v-if="selected === 1">
          <img src="../../assets/images/tabBar/ihome_1.png" class="tab-bar-icon" v-if="selected !== 1">
          <span>首页</span>
        </div>
        <div class="v-flex-column-center-center" :class="{'active':selected === 2}" @click="toCategory">
          <img src="../../assets/images/tabBar/icategory_2.png" class="tab-bar-icon" v-if="selected === 2">
          <img src="../../assets/images/tabBar/icategory_1.png" class="tab-bar-icon" v-if="selected !== 2">
          <span>分类</span>
        </div>
        <div class="v-flex-column-center-center" :class="{'active':selected === 3}">
          <img src="../../assets/images/tabBar/icar_2.png" class="tab-bar-icon" v-if="selected === 3">
          <img src="../../assets/images/tabBar/icar_1.png" class="tab-bar-icon" v-if="selected !== 3">
          <span>购物车</span>
        </div>
        <div class="v-flex-column-center-center" :class="{'active':selected === 4}">
           <img src="../../assets/images/tabBar/icenter_2.png" class="tab-bar-icon" v-if="selected === 4">
          <img src="../../assets/images/tabBar/icenter_1.png" class="tab-bar-icon" v-if="selected !== 4">
          <span>我的</span>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "tabBar",
  props: {
    selected:{
      type:Number
    }
  },
  methods: {
    toHomePage () {
      this.$router.push({name: 'Home'})
    },
    // 分类
    toCategory () {
      this.$router.push({name: 'Category_one'})
    }
  }
}
</script>
<style lang="less">
  .footer-wrapper {
    height:50px;
    color:@color_999;
    background-color:@bg_color_white;
  }
  .footer-list > div {
    padding:5px 0px;
  }
  .tab-bar-icon {
    width:20px;
    height:20px;
  }
  .active {
    color:#e11515;
  }
</style>
